<template>
    <div>
        <el-dialog v-model="state.dialog.show" title="修改导航" width="769px">
            <el-form ref="dialogFormRef" :model="state.form" :rules="state.rules" label-width="120px"
                     size="default">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="父级导航" prop="parentId">
                            <el-cascader v-model="state.form.parentId"
                                         class="w100"
                                         placeholder="请选择父级导航"
                                         :options="navList"
                                         :props="state.selectProps"
                                         clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="导航名称" prop="name">
                            <el-input v-model="state.form.name" clearable
                                      placeholder="请输入导航名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="导航路径" prop="path">
                            <el-input v-model="state.form.path" clearable
                                      placeholder="请输入导航路径">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="导航简介" prop="introduction">
                            <el-input v-model="state.form.introduction" type="textarea" clearable
                                      placeholder="请输入导航简介"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="隐藏 / 显示" prop="hide">
                            <el-radio-group v-model="state.form.hide" class="ml-4">
                                <el-radio :label="false">显示</el-radio>
                                <el-radio :label="true">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="打开方式" prop="openStyle">
                            <el-select v-model="state.form.openStyle">
                                <el-option label="当前窗口" :value="0"></el-option>
                                <el-option label="新开窗口" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="排序权重" prop="sort">
                            <el-input v-model.number="state.form.sort"
                                      type="number"
                                      placeholder="请输入排序权重"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="导航元数据" prop="metadata">
                            <el-input v-model="state.form.metadata" type="textarea" clearable
                                      placeholder="请输入导航名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
					<el-button size="default" type="primary" @click="onSubmit">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue';
import {navApi} from "/@/api/nav";
import stores from "/@/stores";
import {CascaderProps} from "element-plus";
import other from "/@/utils/other";
import {ObjectUtil} from "/@/utils/ObjectUtil";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<DialogState<NavUpdateDto, {
    selectProps: Array<CascaderProps>,
    disabledIds: Array<number>
}>>({
    form: {
        hide: false,
        introduction: "",
        metadata: "",
        name: "",
        openStyle: 0,
        parentId: 0,
        path: "",
        sort: 0
    },
    dialog: {
        show: false
    },
    rules: {
        "parentId": [{required: false, message: "请选择父级导航", trigger: 'change'}],
        "name": [{required: true, message: "请输入导航名称", trigger: 'blur'}],
        "path": [{required: true, message: "请输入导航路径", trigger: 'blur'}],
        "introduction": [{required: false, message: "请输入导航简介", trigger: 'blur'}],
    },
    selectProps: {
        checkStrictly: true,
        emitPath: false,
        value: "id",
        label: "name",
        disabled: (item) => {
            //不允许选择当前菜单或子菜单
            return state.disabledIds.includes(item.id)
        }
    },
    disabledIds: []
});

interface Props{
    navList:Array<NavVo>
}
const props=withDefaults(defineProps<Props>(),{
    navList: () => [],
})
const navList=computed(()=>{
    return props.navList;
})

// 打开弹窗
const openDialog = async (row: NavVo) => {
    state.disabledIds = [];
    //将当前导航以及子菜单的id存起来
    ObjectUtil.traverseTree(row, (item) => {
        state.disabledIds.push(item.id);
    })
    state.form = other.deepClone(row)
    state.dialog.show = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.show = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    dialogFormRef.value?.validate((isValid: boolean) => {
            if (isValid) {
                stores.commonStoreState.openLoading()
                state.form.parentId = state.form.parentId || 0;
                navApi.editNav(state.form).then(() => {
                    closeDialog();
                    emit('refresh');
                    dialogFormRef.value?.resetFields();
                }).finally(() => {
                    stores.commonStoreState.closeLoading()
                })
            }
        }
    )
};
// 暴露变量
defineExpose({
    openDialog,
});
</script>
